<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>消费记录</title>
<script src="assets/js/iscrollEvent.js"></script>
<style>
    html,
    body{
      height: 100%;
    }
</style>
<script type="text/javascript">
	var app = new EventsList(null, {
		api : '${ctx}/weixin/vip/recordPage',
		params : {
			page : 1,
			no_record :'您当前还没有消费哦'
		}
	}, initData);
	app.init();

	document.addEventListener('touchmove', function(e) {
		e.preventDefault();
	}, false);

	function initData(data, type, $list) {
		if (data.rows) {
			var monthTemp = $.trim($("#month_temp").html());
			var recordTemp = $.trim($("#record_temp").html());
			//jquery解析map数据
			$.each(data.rows, function(j, detail) {
				var monthDivId = 'month-' + detail.month;
				var $monthDiv = $list.find('#' + monthDivId);
				if ($monthDiv.length == 0) {
					$list.append(Comm.format(monthTemp, monthDivId, detail.month.substring(2)));
				}
				var $recordDiv = $list.find('#' + monthDivId).find(
						'.app-month-r');
				//解析数组
				$.each(detail.list, function(i, item) {
					$recordDiv.append(Comm.format(recordTemp, item.creDateStr,
							item.shopName, item.serviceNames, item.mdseNames,
							item.employeeNames, item.amount));
				});
			});
		}
	}
</script>
</head>
<body>
	<div id="wrapper" data-am-widget="list_news"
		class="am-list-news am-list-news-default">
		<div class="am-list-news-bd">
			<div class="pull-action loading" id="pull-down">
				<span class="am-icon-arrow-down pull-label" id="pull-down-label">
					下拉刷新</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
			<div class="am-list am-g" id="record-list">
				<div class="am-list-item-text">正在加载内容...</div>
			</div>
			<div class="pull-action" id="pull-up">
				<span class="am-icon-arrow-down pull-label" id="pull-up-label">
					上拉加载更多</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
		</div>
	</div>
	<div style="display: none" id="month_temp">
		<div class="app-month-con" id="{0}">
			<div class="app-month-l">
				<div class="app-month-num">{1}月</div>
			</div>
			<div class="app-month-r"></div>
		</div>
	</div>
	<div style="display: none" id="record_temp">
		<div class="am-panel am-panel-landiao am-text-sm">
			<div class="am-panel-hd am-text-bold">{0} - {1}</div>
			<div class="am-panel-bd">
				<span class="am-block">美发项目：{2}</span>
				<span class="am-block">购买项目：{3}</span> 
				<span class="am-block">服务人员：{4}</span>
				<span class="am-block am-text-right am-text-blue am-text-bold">合计：{5}元</span>
			</div>
		</div>
	</div>
</body>
</html>
